<template>
<view>
    <view class="navbox">
        <view class="navtext" v-for="(item,index) in navList" :key="index" :class="{'text5':index == navindex}" @click="switchnav(index)">
            {{item.text}}
            <view class="downline" v-if="index == navindex"></view>
        </view>
    </view>
    <view class="shopbox">
        <view class="shopcont" v-for="(item,index) in shopList" :key="index">
            <view class="shop_top">
                <image class="shop_img" :src="item.Images.split(',')[0]" mode="aspectFill"></image>
                <view class="shop_info">
                    <view class="shop_namebox">
                        <view class="name_til hiddenText">{{item.ProductName}}</view>
                        <view class="name_status">{{item.Status == 1?'在售':item.Status == 0?'草稿':'下架'}}</view>
                    </view>
                    <view class="shop_spbox">
                        <view class="sp_til hiddenText">{{item.ProductStyleList[0].Style}}</view>
                        <image class="sp_arr" src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1732262728923388.png" @click="changestyle(index)"></image>
                        <!-- <view class="stylebox" v-if="isstyle == index">
                            <view  v-for="(value,i) in item.ProductStyleList" :key="i">
                                <view class="sp_til hiddenText" @click="getstyle(value)">{{value.Style}}</view>
                            </view>
                            
                        </view> -->
                    </view>
                    <view class="shop_price"><text class="price_icon">￥</text>{{item.Price}}</view>
                </view>
            </view>
            <view class="shop_btnbox">
                <view class="btn_box">
                    <image class="btn_icon" src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1732262748225540.png"></image>
                    <view class="btn_text" @click="nav_to('/pages/store/goodes_change?id='+item.ID)">编辑</view>
                </view>
                <view class="btn_line"></view>
                <view v-if="item.Status == 1" class="btn_box" @click="Off(item,index)">
                    <image class="btn_icon" src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1732262761838855.png"></image>
                    <view class="btn_text">下架</view>
                </view>
                <view v-if="item.Status != 1" class="btn_box" @click="upShop(item,index)">
                    <image class="btn_icon" src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1732262761838855.png"></image>
                    <view class="btn_text">上架</view>
                </view>
								<view class="btn_line"></view>
								<view v-if="item.Status == 1" class="btn_box" @click="nav_to(`/pages/store/diary/diary?id=${item.ID}`)">
								    <image class="btn_icon" style="transform: rotate(180deg);" src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1732262761838855.png"></image>
								    <view class="btn_text">种养日志</view>
								</view>
            </view>
        </view>
    </view>
</view>
</template>

<script>
export default {
components: {},
data() {
return {
    navList:[
        {
            text:'全部',
            status:99,
        },
        {
            text:'在售',
            status:1,
        },
        {
            text:'下架',
            status:-1,
        },
        {
            text:'草稿',
            status:0,
        },
    ],
    navindex:0,
    PageIndex:1,
    shopList:[],
    isMore:true,
    isstyle:-1,
    styleText:'',
};
},
onLoad(e){
    this.navindex = e.index
    this.MyProducts()
},
onReachBottom() {
    if (this.isMore) {
        this.PageIndex++;
        this.MyProducts();
    }
},
methods: {
    //上架
    async upShop(item,index){
        let _this = this
        uni.showModal({
            title: '温馨提示',
            content: '您确定要重新上架这件商品吗?',
            confirmText: "确定",
            success: async function(res) {
                if (res.confirm) {
                    let res1 = await _this.$api.post('Products/Up', {
                        ID: item.ID
                    });
                    if(res1.code == 0){
                        let response = await _this.$api.post('/Payment/BasePayV2', {
                            EventType: res1.data.EventType,
                            EventID: res1.data.EventID,
                            body:res1.data.body || res1.data.Pay_Body,
                            total_fee : res1.data.total_fee,
                            SourcePage: 'pages/store/shop_man',
                            PayChannel: 'weixin',
                        });
                        if (response.code == 0) {
                            let payObj = JSON.parse(response.data);
                            // console.log(payObj, '==================PayV2----res.data')

                            uni.requestPayment({
                                provider: 'wxpay',
                                // #ifdef MP-WEIXIN
                                timeStamp: payObj.timeStamp,
                                nonceStr: payObj.nonceStr,
                                package: payObj.package,
                                signType: payObj.signType,
                                paySign: payObj.paySign,
                                // #endif
                                success: async function (res) {
                                    _this.$pv.msg('支付成功');
                                },
                                fail: function (err) {
                                    _this.$pv.msg('您已取消支付');
                                },
                            });
                        }
                        _this.shopList[index].Status = 1
                    }
                } else if (res.cancel) {
                }
            }
        });
    },
    getstyle(value){
        this.styleText = value.Style
        this.isstyle =-1
    },
    changestyle(index){
        // this.isstyle = index
    },
    switchnav(index){
        this.navindex = index
        this.MyProducts()
    },

    async MyProducts(){
        let res = await this.$api.post('Products/MyProducts',{
            Status:this.navList[this.navindex].status || this.navList[0].status,
            ProductName:'',
            PageIndex:this.PageIndex,
            PageSize:10,
        })
        if(res.code == 0){
            if(this.PageIndex == 1){
                this.shopList = res.data
            }else{
                this.shopList = this.shopList.concat(res.data)
            }
            this.isMore = Array.isArray(res.data) && res.data.length >= 10;
            
        }
    },
    async Off(item,index){
        let _this = this
        uni.showModal({
            title: '温馨提示',
            content: '您确定要下架这件商品吗?',
            confirmText: "确定",
            success: async function(res) {
                if (res.confirm) {
                    let res1 = await _this.$api.post('Products/Off', {
                        ID: item.ID
                    });
                    if(res1.code == 0){
                        _this.shopList[index].Status = -1
                    }
                } else if (res.cancel) {
                }
            }
        });
    },
},
}
</script>
<style lang='scss'>
page{
    background-color: #f6f6f6;
}
.navbox{
    width: 750rpx;
    height: 88rpx;
    background: #FFFFFF;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    .navtext{
        width: calc(100% / 4);
        height: 88rpx;
        line-height: 88rpx;
        text-align: center;
        position: relative;
        font-size: 28rpx;
        color: #666666;
        .downline{
            width: 48rpx;
            height: 6rpx;
            background: #FF6030;
            border-radius: 5rpx;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
        }
    }
    .text5{
        font-size: 32rpx !important;
        font-weight: bold;
        color: #FF6030 ;
    }
}
.shopbox{
    margin-top: 112rpx;
    padding-bottom: 100rpx;
    .shopcont{
        width: 100%;
        height: 366rpx;
        background-color: #fff;
        margin-bottom: 16rpx;
        .shop_top{
            width: calc(100% - 32rpx);
            height: 268rpx;
            margin-left: 32rpx;
            padding: 32rpx 0;
            box-sizing: border-box;
            border-bottom: 1rpx solid #e4e4e4;
            display: flex;
            .shop_img{
                width: 204rpx;
                height: 204rpx;
                border-radius: 16rpx;
                margin-right: 24rpx;
                background-color: red;
            }
            .shop_info{
                flex: 1;
                .shop_namebox{
                    display: flex;
                    align-items: center;
                    margin-bottom: 16rpx;
                    .name_til{
                        font-size: 28rpx;
                        font-weight: bold;
                        width: 386rpx;
                    }
                    .name_status{
                        font-size: 24rpx;
                        color: #FF6030;
                    }
                }
                .shop_spbox{
                    width: 424rpx;
                    height: 48rpx;
                    background: #F2F2F2;
                    border-radius: 28rpx;
                    padding: 8rpx 16rpx;
                    box-sizing: border-box;
                    display: flex;
                    align-items: center;
                    position: relative;
                    .stylebox{
                        width: 424rpx;
                        background: #F2F2F2;
                        padding: 8rpx 16rpx;
                        position: absolute;
                        bottom: -40px;
                        left: 0;
                    }
                    .sp_til{
                        font-size: 24rpx;
                        color: #666666;
                        width: 360rpx;
                        margin-right: 8rpx;
                    }
                    .sp_arr{
                        width: 24rpx;
                        height: 24rpx;
                    }
                }
                .shop_price{
                    font-size: 36rpx;
                    font-weight: bold;
                    color: #F91C1C;
                    margin-top: 56rpx;
                    .price_icon{
                        font-size: 24rpx;
                        font-weight: bold;
                        color: #F91C1C;
                    }
                }
            }
        }
        .shop_btnbox{
            display: flex;
            height: 96rpx;
            align-items: center;
            .btn_line{
                width: 2rpx;
                height: 30rpx;
                border-right: 2rpx solid #E4E4E4;
            }
            .btn_box{
                width: 49%;
                display: flex;
                align-items: center;
                justify-content: center;
                .btn_icon{
                    width: 32rpx;
                    height: 32rpx;
                    margin-right: 8rpx;
                }
                .btn_text{
                    font-size: 28rpx;
                }
            }
        }
    }
}
</style>